{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow">
    <!-- 选项卡 -->
    <div class="border-b border-gray-200">
        <nav class="flex -mb-px">
            <button class="px-6 py-3 border-b-2 border-blue-500 text-blue-600 font-medium">
                账号管理
            </button>
            <button class="px-6 py-3 text-gray-500 hover:text-gray-700 font-medium">
                浏览器管理
            </button>
        </nav>
    </div>

    <!-- 账号管理内容 -->
    <div class="p-6">
        <div class="mb-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                新增账号
            </button>
        </div>

        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                <tr>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        用户名
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        浏览器ID
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        浏览器名称
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        状态
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for account in accounts %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">{{ account.username }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ account.browser_id }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ account.browser_name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if account.status %}
                            bg-green-100 text-green-800
                            {% else %}
                            bg-red-100 text-red-800
                            {% endif %}">
                            {{ "正常" if account.status else "禁用" }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-blue-600 hover:text-blue-900">编辑</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %} 
 